<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted, reactive, computed } from 'vue'
import { getChapterListByPage, getDetailChapter } from '@/api/book/index.js'
import { getPaginationConfig } from '@/components/pagination.js'

let dataSource = ref([])
// 分页参数配置
const paginationConfig = ref(getPaginationConfig())
const route = useRoute()
const router = useRouter()
const chapterState = reactive({
  params: {
    novelId: route.query.novelId,
    pageNum: 1,
    pageSize: 10
  },
  content: '',
  loading: false,
  preVisible: false,
  chapterName: '',
  chapterNo: ''
})
onMounted(() => {
  loadData(chapterState.params)
})

// 编辑小说章节内容
const handleEdit = ({ id, chapterNo }) => {
  router.push({ path: '/book/chapter/upload', query: { ...route.query, chapter: chapterNo,  cid: id } })
}
// 预览小说章节内容
const handlePreview = ({ id }) => {
  getDetailChapter({ id })
    .then(res => {
      chapterState.content = res.chapterContentHtml
      chapterState.title = res.chapterName
      chapterState.preVisible = true,
      chapterState.chapterNo = res.chapterNo
    })  
}
const columns = [
  {
    title: '章节名称',
    dataIndex: 'chapterName'
  },
  {
    title: '字数',
    dataIndex: 'wordNums',
    align: 'center'
  },
  {
    title: '章节号',
    dataIndex: 'chapterNo',
    align: 'center'
  },
  {
    title: '发布时间',
    dataIndex: 'createdTime',
    align: 'center'
  },
  {
    title: '申请状态',
    dataIndex: 'status',
    slots: {
      customRender: 'status',
    }
  },
  {
    title: '操作',
    dataIndex: 'action',
    slots: {
      customRender: 'action',
    },
    align: 'center'
  }
]
// 获取章节列表数据
const loadData = (params) => {
  chapterState.loading = true
  getChapterListByPage(params)
  .then(res => {
    dataSource.value = res.records || []
    paginationConfig.value.total = res.total
    chapterState.loading = false
  })
  .finally(() => {
    chapterState.loading = false
  })
}
// 监听Table
const handleTableChange = ({ current }) => {
  chapterState.params.pageNum = current
  paginationConfig.value.current = current
  loadData(chapterState.params)
}
const modalTitle = computed(() => `第${chapterState.chapterNo}章`+chapterState.title)
</script>
<template>
  <a-table 
    :dataSource="dataSource"  
    :columns="columns" 
    :loading="chapterState.loading"
    :rowKey="record => record.id" 
    :pagination="paginationConfig"
    @change="handleTableChange"
  >
    <template #status="{ record }">
        <a-tag v-if="record.status === 0" color="warning">草稿</a-tag>
        <a-tag v-if="record.status === 1" color="success">发布</a-tag>
        <a-tag v-if="record.status === 2" color="red">审核中</a-tag>
        <a-tag v-if="record.status === 3" color="error">审核失败</a-tag>
    </template>
    <template #action="{ record }">
      <a-button type="link" @click="() => handlePreview(record)">预览</a-button>
      <a-button  type="link" @click="() => handleEdit(record)">编辑</a-button>
    </template>
  </a-table>
  <a-modal width="960px" v-model:visible="chapterState.preVisible" :footer="null">
    <template #title>
      <div class="gloabal-title-draft" style="">{{ modalTitle }}</div>
    </template>
    <div class="gloabal-content-draft" v-html="chapterState.content"></div>
  </a-modal>

</template>
<style lang="less">
  .gloabal-content-draft {
    p {
      text-indent: 2em;
      padding-top: 26px;
      font-size: 18px;
      margin-bottom: 0;
    }
  }
  .gloabal-title-draft {
    text-align: center; 
    font-size: 24px;
    color: #222;
  }
</style>